<script setup lang='ts'>
import {ref, watch} from 'vue'
import {DrawerProps, DrawerEmits} from './dDrawer'

const props = defineProps(DrawerProps)
const emits = defineEmits(DrawerEmits)

//显示
const drawer = ref(props.showDrawer)

watch(
  () => props.showDrawer,
  (showDrawer) => {
    drawer.value = showDrawer
  }
)

//取消
const onCancel = () => {
  emits('cancel')
}

//确认保存
const onConfirm = () => {
  emits('confirm')
}

//打开
const onOpen = () => {
  emits('open')
}

//关闭
const onClose = () => {
  emits('close')
}

</script>

<template>
  <el-drawer
    v-model="drawer"
    custom-class="d-drawer__wapper"
    :title="title"
    :direction="direction"
    :size="size"
    :before-close="beforeClose"
    @open="onOpen"
    @close="onClose"
  >
    <template #default>
      <slot name="default" />
    </template>
    <template #footer>
      <div class="d-common-flex-algin-just">
        <el-button v-blur @click="onCancel">
          取消
        </el-button>
        <el-button v-blur type="primary" @click="onConfirm">
          保存
        </el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style scoped>
</style>